<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>票务统计分析 - 铁路管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/admin/css/styles.css">
    <!-- 引入ECharts -->
    <script src="/admin/js/echarts.min.js"></script>
    <style>
        #app {
            display: flex;
            min-height: 100vh;
            width: 100%;
        }

        .chart-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            padding: 20px;
        }

        .chart-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chart {
            width: 100%;
            height: 390px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: #1976d2;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }

        .stat-change {
            font-size: 0.8rem;
            margin-top: 5px;
        }

        .stat-change.positive {
            color: #4caf50;
        }

        .stat-change.negative {
            color: #f44336;
        }

        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .filter-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .filter-item label {
            font-weight: 500;
            color: #333;
        }

        .filter-item select, .filter-item input {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
            transition: border-color 0.3s;
        }

        .filter-item select:focus, .filter-item input:focus {
            border-color: #1976d2;
        }

        .date-range {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-filter {
            background-color: #1976d2;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-filter:hover {
            background-color: #1565c0;
        }

        .btn-filter:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .loading-mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            border-radius: 8px;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #1976d2;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .chart-actions {
            display: flex;
            gap: 10px;
        }

        .chart-action-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
            transition: background-color 0.3s, color 0.3s;
        }

        .chart-action-btn:hover {
            background-color: #f5f5f5;
            color: #1976d2;
        }
    </style>
</head>
<body>

<div id="app">
    <!-- 主内容区 -->
    <div class="main-content">


        <!-- 页面内容区域 -->
        <div id="page-content" style="padding: 0 20px;">
            <h3 style="margin-bottom: 20px;">票务统计分析</h3>

            <!-- 过滤条件区域 -->
            <div class="filter-bar">
                <div class="filter-item">
                    <label for="dateType">时间范围:</label>
                    <select id="dateType" v-model="filterForm.dateType">
                        <option value="day">今日</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                        <option value="year">本年</option>
                        <option value="custom">自定义</option>
                    </select>
                </div>

                <div class="date-range" v-if="filterForm.dateType === 'custom'">
                    <input type="date" v-model="filterForm.startDate">
                    <span>至</span>
                    <input type="date" v-model="filterForm.endDate">
                </div>

                <div class="filter-item">
                    <label for="trainType">车次类型:</label>
                    <select id="trainType" v-model="filterForm.trainType">
                        <option value="">全部</option>
                        <option value="G">高铁</option>
                        <option value="D">动车</option>
                        <option value="Z">直达</option>
                        <option value="T">特快</option>
                        <option value="K">快速</option>
                    </select>
                </div>

                <div class="filter-item">
                    <label for="station">车站:</label>
                    <select id="station" v-model="filterForm.station">
                        <option value="">全部</option>
                        <option v-for="station in stations" :key="station.stationId" :value="station.stationId">
                            {{ station.stationName }}
                        </option>
                    </select>
                </div>

                <button class="btn-filter" @click="loadStatistics" :disabled="loading">
                    <i v-if="loading" class="fas fa-spinner fa-spin"></i>
                    {{ loading ? '加载中...' : '刷新数据' }}
                </button>
            </div>

            <!-- 关键指标卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number">{{ totalSales }}</div>
                    <div class="stat-label">总销售额 (元)</div>
                    <div class="stat-change positive" v-if="salesGrowth > 0">
                        <i class="fas fa-arrow-up"></i> 较上期增长 {{ salesGrowth }}%
                    </div>
                    <div class="stat-change negative" v-else-if="salesGrowth < 0">
                        <i class="fas fa-arrow-down"></i> 较上期下降 {{ Math.abs(salesGrowth) }}%
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-number">{{ totalTickets }}</div>
                    <div class="stat-label">总售票数</div>
                    <div class="stat-change positive" v-if="ticketGrowth > 0">
                        <i class="fas fa-arrow-up"></i> 较上期增长 {{ ticketGrowth }}%
                    </div>
                    <div class="stat-change negative" v-else-if="ticketGrowth < 0">
                        <i class="fas fa-arrow-down"></i> 较上期下降 {{ Math.abs(ticketGrowth) }}%
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-number">{{ avgTicketPrice }}</div>
                    <div class="stat-label">平均票价 (元)</div>
                </div>

                <div class="stat-card">
                    <div class="stat-number">{{ passengerCount }}</div>
                    <div class="stat-label">总客流量</div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="chart-container" v-loading="chartLoading.salesTrend">
                <div class="chart-title">
                    本月销售额趋势
                    <div class="chart-actions">
                        <button class="chart-action-btn" @click="exportChart('salesTrendChart', '销售额趋势图')"
                                title="导出图片">
                            <i class="fas fa-download"></i>
                        </button>
                    </div>
                </div>
                <div v-if="chartLoading.salesTrend" class="loading-mask">
                    <div class="loading-spinner"></div>
                </div>
                <div id="salesTrendChart" class="chart"></div>
            </div>

            <div class="chart-container" v-loading="chartLoading.popularTrains">
                <div class="chart-title">
                    热门车次TOP10
                    <div class="chart-actions">
                        <button class="chart-action-btn" @click="exportChart('popularTrainsChart', '热门车次TOP10')"
                                title="导出图片">
                            <i class="fas fa-download"></i>
                        </button>
                    </div>
                </div>
                <div v-if="chartLoading.popularTrains" class="loading-mask">
                    <div class="loading-spinner"></div>
                </div>
                <div id="popularTrainsChart" class="chart"></div>
            </div>

            <div class="chart-container" v-loading="chartLoading.ticketType">
                <div class="chart-title">
                    票务类型分布
                    <div class="chart-actions">
                        <button class="chart-action-btn" @click="exportChart('ticketTypeChart', '票务类型分布图')"
                                title="导出图片">
                            <i class="fas fa-download"></i>
                        </button>
                    </div>
                </div>
                <div v-if="chartLoading.ticketType" class="loading-mask">
                    <div class="loading-spinner"></div>
                </div>
                <div id="ticketTypeChart" class="chart"></div>
            </div>

            <div class="chart-container" v-loading="chartLoading.popularStations">
                <div class="chart-title">
                    热门出发站TOP10
                    <div class="chart-actions">
                        <button class="chart-action-btn" @click="exportChart('popularStationsChart', '热门出发站TOP10')"
                                title="导出图片">
                            <i class="fas fa-download"></i>
                        </button>
                    </div>
                </div>
                <div v-if="chartLoading.popularStations" class="loading-mask">
                    <div class="loading-spinner"></div>
                </div>
                <div id="popularStationsChart" class="chart"></div>
            </div>
        </div>
    </div>
</div>
<script src="/admin/js/auth.js"></script>
<script src="/admin/js/jquery-3.6.0.js"></script>
<script src="/admin/js/vue.js"></script>
<script src="/admin/js/load-navbar.js"></script>
<script src="/admin/js/user-info.js"></script>
<script src="/admin/js/axios.js"></script>
<script src="/admin/js/config.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userName: '',
            // 过滤条件
            filterForm: {
                dateType: 'month',
                startDate: '',
                endDate: '',
                trainType: '',
                station: ''
            },
            // 统计数据
            totalSales: 0,
            totalTickets: 0,
            avgTicketPrice: 0,
            passengerCount: 0,
            salesGrowth: 0, // 销售额增长率
            ticketGrowth: 0, // 售票量增长率
            stations: [], // 车站列表
            // 图表实例
            salesTrendChart: null,
            popularTrainsChart: null,
            ticketTypeChart: null,
            popularStationsChart: null,
            // 加载状态
            loading: false,
            chartLoading: {
                salesTrend: false,
                popularTrains: false,
                ticketType: false,
                popularStations: false
            }
        },
        mounted() {
            // 初始化图表
            this.initCharts();
            // 加载车站列表
            this.loadStations();
            // 加载统计数据
            this.loadStatistics();
            // 设置当前页面标识
            sessionStorage.setItem('currentPage', 'ticket_statistics.html');
        },
        methods: {
            // 初始化所有图表
            initCharts() {
                // 销售额趋势图
                this.salesTrendChart = echarts.init(document.getElementById('salesTrendChart'));
                // 热门车次TOP10
                this.popularTrainsChart = echarts.init(document.getElementById('popularTrainsChart'));
                // 票务类型分布图
                this.ticketTypeChart = echarts.init(document.getElementById('ticketTypeChart'));
                // 热门出发站TOP10
                this.popularStationsChart = echarts.init(document.getElementById('popularStationsChart'));

                // 响应式调整
                window.addEventListener('resize', () => {
                    this.salesTrendChart.resize();
                    this.popularTrainsChart.resize();
                    this.ticketTypeChart.resize();
                    this.popularStationsChart.resize();
                });
            },

            // 加载车站列表
            loadStations() {
                axios.get('/admin/train_number/findStationList')
                    .then(res => {
                        if (res.data.code === 200) {
                            this.stations = res.data.data;
                        } else {
                            alert('加载车站列表失败: ' + res.data.message);
                        }
                    })
                    .catch(err => {
                        console.error('加载车站列表失败', err);
                        alert('加载车站列表失败，请稍后重试');
                    });
            },

            // 加载统计数据
            loadStatistics() {
                this.loading = true;

                // 重置所有图表加载状态
                Object.keys(this.chartLoading).forEach(key => {
                    this.chartLoading[key] = true;
                });

                // 构建请求参数
                const params = {
                    dateType: this.filterForm.dateType,
                    trainType: this.filterForm.trainType,
                    station: this.filterForm.station
                };

                // 如果是自定义时间范围，添加日期参数
                if (this.filterForm.dateType === 'custom') {
                    params.startDate = this.filterForm.startDate;
                    params.endDate = this.filterForm.endDate;
                }

                // 同时请求所有数据
                Promise.all([
                    this.getSummaryData(params),
                    this.getSalesTrendData(),
                    this.getPopularTrainsData(params),
                    this.getTicketTypeData(params),
                    this.getPopularStationsData(params)
                ])
                    .finally(() => {
                        this.loading = false;
                    });
            },

            // 获取核心指标数据
            getSummaryData(params) {
                return axios.get('/admin/statistics/ticket/summary', {params})
                    .then(res => {
                        if (res.data.code === 200) {
                            const data = res.data.data;
                            this.totalSales = this.formatNumber(data.totalSales);
                            this.totalTickets = this.formatNumber(data.totalTickets);
                            this.avgTicketPrice = this.formatNumber(data.avgTicketPrice, 2); // 保留两位小数
                            this.passengerCount = this.formatNumber(data.passengerCount);
                            // 如果有增长率数据
                            if (data.salesGrowth !== undefined) {
                                this.salesGrowth = data.salesGrowth.toFixed(2);
                            }
                            if (data.ticketGrowth !== undefined) {
                                this.ticketGrowth = data.ticketGrowth.toFixed(2);
                            }
                        } else {
                            console.error('获取核心指标数据失败', res);
                            alert('获取核心指标数据失败: ' + res.data.message);
                        }
                    })
                    .catch(err => {
                        console.error('获取核心指标数据失败', err);
                        alert('获取核心指标数据失败，请稍后重试');
                    });
            },

            // 获取本月销售额趋势数据
            getSalesTrendData() {
                this.chartLoading.salesTrend = true;

                return axios.get('/admin/statistics/ticket/salesTrend')
                    .then(res => {
                        if (res.data.code === 200) {
                            this.updateSalesTrendChart(res.data.data);
                        } else {
                            console.error('获取销售额趋势数据失败', res);
                            this.updateSalesTrendChartWithMockData();
                        }
                    })
                    .catch(err => {
                        console.error('获取销售额趋势数据失败', err);
                        this.updateSalesTrendChartWithMockData();
                    })
                    .finally(() => {
                        this.chartLoading.salesTrend = false;
                    });
            },

            // 获取热门车次数据
            getPopularTrainsData(params) {
                this.chartLoading.popularTrains = true;

                return axios.get('/admin/statistics/ticket/popularTrains', {params})
                    .then(res => {
                        if (res.data.code === 200) {
                            this.updatePopularTrainsChart(res.data.data);
                        } else {
                            console.error('获取热门车次数据失败', res);
                            this.updatePopularTrainsChartWithMockData();
                        }
                    })
                    .catch(err => {
                        console.error('获取热门车次数据失败', err);
                        this.updatePopularTrainsChartWithMockData();
                    })
                    .finally(() => {
                        this.chartLoading.popularTrains = false;
                    });
            },

            // 获取票务类型分布数据
            getTicketTypeData(params) {
                this.chartLoading.ticketType = true;

                return axios.get('/admin/statistics/ticket/typeDistribution', {params})
                    .then(res => {
                        if (res.data.code === 200) {
                            this.updateTicketTypeChart(res.data.data);
                        } else {
                            console.error('获取票务类型分布数据失败', res);
                            this.updateTicketTypeChartWithMockData();
                        }
                    })
                    .catch(err => {
                        console.error('获取票务类型分布数据失败', err);
                        this.updateTicketTypeChartWithMockData();
                    })
                    .finally(() => {
                        this.chartLoading.ticketType = false;
                    });
            },

            // 获取热门出发站数据
            getPopularStationsData(params) {
                this.chartLoading.popularStations = true;

                return axios.get('/admin/statistics/ticket/popularStations', {params})
                    .then(res => {
                        if (res.data.code === 200) {
                            this.updatePopularStationsChart(res.data.data);
                        } else {
                            console.error('获取热门出发站数据失败', res);
                            this.updatePopularStationsChartWithMockData();
                        }
                    })
                    .catch(err => {
                        console.error('获取热门出发站数据失败', err);
                        this.updatePopularStationsChartWithMockData();
                    })
                    .finally(() => {
                        this.chartLoading.popularStations = false;
                    });
            },

            // 更新销售额趋势图（使用API数据）
            updateSalesTrendChart(data) {
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['销售额', '售票量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: data.dates
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '销售额(元)',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '售票量(张)',
                            position: 'right',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '销售额',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data.salesData
                        },
                        {
                            name: '售票量',
                            type: 'line',
                            yAxisIndex: 1,
                            emphasis: {
                                focus: 'series'
                            },
                            data: data.ticketCountData
                        }
                    ]
                };

                this.salesTrendChart.setOption(option);
            },

            // 更新热门车次TOP10图表（使用API数据）
            updatePopularTrainsChart(data) {
                const trainNumbers = data.map(item => item.trainNumber);
                const ticketCounts = data.map(item => item.ticketCount);

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: trainNumbers
                    },
                    series: [
                        {
                            name: '售票量',
                            type: 'bar',
                            data: ticketCounts,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ])
                            }
                        }
                    ]
                };

                this.popularTrainsChart.setOption(option);
            },

            // 更新票务类型分布图（使用API数据）
            updateTicketTypeChart(data) {
                const option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '票务类型',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: data
                        }
                    ]
                };

                this.ticketTypeChart.setOption(option);
            },

            // 更新热门出发站TOP10图表（使用API数据）
            updatePopularStationsChart(data) {
                const stationNames = data.map(item => item.stationName);
                const passengerCounts = data.map(item => item.passengerCount);

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: stationNames,
                        axisLabel: {
                            rotate: 45
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '出发客流量',
                            type: 'bar',
                            data: passengerCounts,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {offset: 0, color: '#ff9a9e'},
                                    {offset: 1, color: '#fad0c4'}
                                ])
                            }
                        }
                    ]
                };

                this.popularStationsChart.setOption(option);
            },

            // 使用模拟数据更新销售额趋势图（API请求失败时使用）
            updateSalesTrendChartWithMockData() {
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['销售额', '售票量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '销售额(元)',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '售票量(张)',
                            position: 'right',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '销售额',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [35000, 45000, 38000, 52000, 48000, 60000, 55000, 58000, 62000, 70000, 65000, 68000, 75000, 82000, 78000, 85000, 88000, 92000, 86000, 90000, 95000, 100000, 98000, 105000, 110000, 108000, 115000, 120000, 118000, 125000]
                        },
                        {
                            name: '售票量',
                            type: 'line',
                            yAxisIndex: 1,
                            emphasis: {
                                focus: 'series'
                            },
                            data: [45, 58, 49, 66, 61, 76, 70, 74, 79, 89, 82, 86, 95, 104, 99, 108, 112, 117, 109, 114, 121, 127, 124, 133, 140, 138, 146, 152, 150, 158]
                        }
                    ]
                };

                this.salesTrendChart.setOption(option);
            },

            // 使用模拟数据更新热门车次TOP10图表（API请求失败时使用）
            updatePopularTrainsChartWithMockData() {
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['G101', 'G202', 'D303', 'Z404', 'T505', 'G606', 'D707', 'G808', 'Z909', 'K1010']
                    },
                    series: [
                        {
                            name: '售票量',
                            type: 'bar',
                            data: [1258, 1190, 1085, 980, 890, 850, 780, 750, 720, 680],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ])
                            }
                        }
                    ]
                };

                this.popularTrainsChart.setOption(option);
            },

            // 使用模拟数据更新票务类型分布图（API请求失败时使用）
            updateTicketTypeChartWithMockData() {
                const option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '票务类型',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 45, name: '高铁'},
                                {value: 25, name: '动车'},
                                {value: 15, name: '直达'},
                                {value: 10, name: '特快'},
                                {value: 5, name: '快速'}
                            ]
                        }
                    ]
                };

                this.ticketTypeChart.setOption(option);
            },

            // 使用模拟数据更新热门出发站TOP10图表（API请求失败时使用）
            updatePopularStationsChartWithMockData() {
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['北京南', '上海虹桥', '广州南', '深圳北', '杭州东', '南京南', '武汉', '成都东', '西安北', '长沙南'],
                        axisLabel: {
                            rotate: 45
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '出发客流量',
                            type: 'bar',
                            data: [2850, 2620, 2450, 2280, 2150, 2050, 1980, 1920, 1850, 1780],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {offset: 0, color: '#ff9a9e'},
                                    {offset: 1, color: '#fad0c4'}
                                ])
                            }
                        }
                    ]
                };

                this.popularStationsChart.setOption(option);
            },

            // 导出图表为图片
            exportChart(chartId, fileName) {
                const chartInstance = this[chartId];
                if (chartInstance) {
                    // 获取图表的base64图片
                    const url = chartInstance.getDataURL({
                        type: 'png',
                        pixelRatio: 2, // 导出图片的像素比例
                        backgroundColor: '#fff'
                    });

                    // 创建下载链接
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = `${fileName}_${new Date().toLocaleDateString()}.png`;
                    link.click();
                }
            },

            // 格式化数字（添加千位分隔符，并可选择保留小数位数）
            formatNumber(num, decimalPlaces) {
                if (num === null || num === undefined) {
                    return '0';
                }

                // 如果指定了小数位数，则先格式化小数
                if (decimalPlaces !== undefined && !isNaN(decimalPlaces)) {
                    num = Number(num).toFixed(decimalPlaces);
                }

                // 分割整数部分和小数部分
                const parts = num.toString().split('.');
                // 对整数部分添加千位分隔符
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                // 重新组合整数和小数部分
                return parts.join('.');
            }
        }
    });
</script>
</body>
</html>
